<template>
  <div class="main">
    <main-bottombar :menus="menus"></main-bottombar>
    <div class="mui-content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
  import MainBottombar from './common/main-bottombar'
  export default {
    data () {
      return {
        menus:[
          {'label':'首页','icon':'mui-icon mui-icon-home','pagePath':'/home'},
          //{'label':'分类','icon':'mui-icon iconfont icon-fenlei','pagePath':'/catalog'},
          //{'label':'购物车','icon':'mui-icon iconfont icon-gouwuche','pagePath':'/cart'},
          {'label':'我的','icon':'mui-icon iconfont icon-wode','pagePath':'/personal'},
        ]
      }
    },
    components:{
      MainBottombar
    },
  }
</script>

<style scoped lang="less">
.main {
  height: 100%;
  .mui-content{
    height: 100%;
  }
  .fade-enter-active{
    transition: opacity 1.5s
  }
  .fade-enter, .fade-leave-to {
    opacity:0;
  }
  .fade-enter-to, .fade-leave{
    opacity:1;
  }
}
</style>
